<script lang="ts" setup>
import { isEmptyType } from "@/assets/js/types";
import useVueTabs from "./hooks/useVueTabs";
defineOptions({
  name: "VueTabs"
});
const themeStyle = ref({
  "--van-tabs-nav-background": "transparent",
  "--van-tabs-bottom-bar-height": "0px",
  "--van-tab-line-height": pxChangeRem(26),
  "--van-tabs-line-height": pxChangeRem(26)
});

const emit = defineEmits(["clickTab"]);
const { tabList, activeName, duration } = useVueTabs();
function handleClickTab({ name }: any) {
  const item = tabList.value[name];
  emit("clickTab", name, item);
}
function handleSlideTab(name: number | number, title: string) {
  console.log(2222, name, title);
}
</script>
<template>
  <div class="center" v-if="!isEmptyType(tabList)">
    <van-tabs
      v-model:active="activeName"
      v-bind:style="themeStyle"
      @click-tab="handleClickTab"
      @change="handleSlideTab"
      :duration="duration / 1000"
      swipeable
      :swipe-threshold="1"
      :animated="false"
      :ellipsis="false"
      :shrink="false"
      class="h-26 mt-14 mb-14 shadow-[0px_0px_4px_0px_rgba(0,0,0,0.06)] rounded-38 bg-[#fff] mw-01"
    >
      <van-tab
        v-for="(item, index) in tabList"
        :key="index"
        :title="item.title"
      />
    </van-tabs>
  </div>
</template>
<style lang="scss" scoped>
:deep(.van-tabs) {
  .van-tabs__wrap {
    .van-tabs__nav {
      padding: 0px;
      .van-tabs__nav--line {
        padding-bottom: 0px;
      }
      .van-tab {
        padding: 0px;
        .van-tab__text {
          color: #3a3a77;
          width: 100%;
          font-weight: 500;
          font-size: 12px;
          text-align: center;
        }
        &.van-tab--active {
          pointer-events: none;
          .van-tab__text {
            height: 26px;
            border-radius: 16px;
            background-color: #ffe500;
          }
        }
      }
    }
  }
}
</style>
